<template>
  <div id="hello">
    <mt-cell :title="sende"  is-link to='/Sender' class="jsinfo">
      <img slot="icon" src="../assets/img/iconJi.png" width="17" height="17">
    </mt-cell>
    <mt-cell :title="Addressee"  is-link to='/Sender' class="jsinfo">
      <img slot="icon" src="../assets/img/iconSou.png" width="17" height="17">
    </mt-cell>
    <mt-cell :title="exprssSelect"  is-link to='/Sender' class="exprssSelect">
    </mt-cell>
    <mt-cell :title="site"  is-link to='/Sender' class="siteSelect">
    </mt-cell>
    <mt-cell title="付费方式" class="payAction">
      <mt-radio v-model="payAction" :options="['寄付', '到付']"></mt-radio>
    </mt-cell>
    <mt-cell title="物品名称" class="goodsName">
        <span class="listItem " v-for="(item,index) in goods"  @click="selectStyle(item,index)" :class="[activeOn===index?'listItemOn':'']">{{item}}</span>  
    </mt-cell>
    <mt-cell title="物品重量(kg)" class="goodsWeight">
      <span class="item add" @click='add'>+</span>
      <span class="item num">{{goodsWeightNum}}</span>
      <span class="item reduce" @click="reduce">-</span>
    </mt-cell>
      <mt-field  placeholder="请输入备注信息" v-model="remarksInfo" class="remarks" @change='cosol'></mt-field>
      <mt-checklist  v-model="checkList" :options="['同意《寄件服务条款》']" class="agreement"></mt-checklist>
      <div class="indexFoot">
        <div class="left">
          预估价:  <span>$12.00</span>
        </div>
        <div class=" right">
          下单
        </div>
      </div>
  </div>
</template>

<script>
import { Cell,Radio,Field ,Checklist   } from 'mint-ui';
export default {
  name: 'hello',
  data () {
    return {
      sende:'点此编辑寄件人信息',
      Addressee:'点此编辑收件人信息',
      exprssSelect:'快递公司选择',
      site:'寄件站点',
      payAction:'',
      goods:['文件','小件','大件','其他'],
      activeOn:-1,
      goodsItem:'',
      goodsWeightNum:1,
      remarksInfo:'',
      checkList:[]
    }
  },
  mounted:function(){
    var cHight = document.body.clientHeight;
    // document.getElementById('#hello').offsetHeight = cHight+'px'
  },
  methods:{
      selectStyle (item,index) {
        this.goodsItem = item;
        this.activeOn = index;
　　　　},
      add(){
        this.goodsWeightNum+=1;
      },
      reduce(){
        if(this.goodsWeightNum<=1){
          return false
        }else{
          this.goodsWeightNum-=1;
        }
      },
      cosol(){
        console.log( this.remarksInfo )
      }

  },
  components:{
    Cell,
    Radio,
    Field,
    Checklist 
  }
}
</script>
<style >

</style>

<!-- Add "scoped" attribute to limit CSS to this component only -->

